<template>
  <div class='container'>
    <el-dialog :title="isEdit? '修改目录':'新增目录'"
               :visible.sync="isShow"
               width="30%">
      <el-form :rules="ruleInline"
               ref="formMenu"
               :model="formMenu"
               label-position="left"
               label-width="120px"
               style='width: 400px; margin-left:120px;'>

        <el-form-item label="所属学科">
          <el-select v-model="formMenu.subjectID">
            <el-option v-for="(item,index) in directoryList"
                       :label="item.subjectName"
                       :value="item.subjectID"
                       :key="index">
            </el-option>
          </el-select>
          <!-- 重新提交 -->

        </el-form-item>
        <el-form-item label="标签名称"
                      prop="tagName">
          <el-input v-model="formMenu.tagName"
                    placeholder="请输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="$emit('close')">取 消</el-button>
        <el-button type="primary"
                   @click="submitAdd('formMenu')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/tags'
const _this = []
export default {
  name: 'TagsAdd',
  props: {
    directoryList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      title: '',
      isEdit: false,
      isShow: false,
      parentList: [],
      formMenu: {
        subjectID: '',
        tagName: '',
        id: null
      },
      value: '',
      ruleInline: {
        tagName: [{ required: true, message: '学科不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.isShow = true
    },
    hanldeEditForm (subjectID) {
      this.formMenu.id = subjectID
      detail({ id: subjectID }).then(data => {
        this.formMenu.id = data.data.id
        this.formMenu.subjectID = data.data.subjectID
        this.formMenu.tagName = data.data.tagName
      })
    }, // 修改 添
    // 弹层隐藏
    dialogFormH () {
      this.isShow = false
    },
    // 添加目录
    submitAdd () {
      this.$refs.formMenu.validate(async valid => {
        if (!valid) return this.$message.warning('验证失败了')
        if (this.isEdit) {
          update(this.formMenu).then(() => {
            // 关闭弹窗
            this.$emit('handClose')
            this.$emit('getTagsList')
          })
        } else {
          add(this.formMenu).then(() => {
            this.handleResetForm()
            // _this.type = 'menu'
            console.log(this.formMenu)
            this.$emit('newDataes', this.formMenu)

            this.$message({
              type: 'success',
              message: '追加成功!'
            })

            this.$emit('subClose')
          })
        }
      })
    }, // 重置表单
    handleResetForm () {
      this.formMenu.subjectID = ''
      this.formMenu.tagName = ''
    } // 获取输入框的回显数据
  }
}
</script>

<style >
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
